<template>
  <SettingModal :list="processInfo.defaultFormList" :isSingle="false" @submit="submit">
    <InputModel :placeholder="t('请选择默认表单')" :value="processInfo.defaultFormList.length">
      <div v-if="processInfo.defaultFormList && processInfo.defaultFormList.length > 0">
        <a-tag
          v-for="(item, index) in processInfo.defaultFormList"
          :key="index"
          closable
          @close="closeTag(index)"
          >{{ item.formName }}</a-tag
        >
      </div>
    </InputModel>
  </SettingModal>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  import SettingModal from '/@bpmn/components/formSettings/SettingModal.vue';
  import InputModel from '/@bpmn/components/InputModel.vue';
  import { FormSettingItem } from '/@/model/workflow/formSetting';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { nodesAppendDefaultForm } from '/@bpmn/config/property';
  import { formPermissionList } from '/@bpmn/config/formPermission';
  import { randomTime } from '/@bpmn/util/random';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const store = useBpmnStore();
  const { processInfo } = storeToRefs(store);
  async function submit(list: Array<FormSettingItem>) {
    let defaultFormList = list.map((ele) => {
      ele.key = 'form_' + ele.formId + '_' + randomTime();
      return ele;
    });
    processInfo.value.defaultFormList = defaultFormList;
    let returnArr = await formPermissionList(defaultFormList);
    nodesAppendDefaultForm(returnArr);
  }
  function closeTag(index: number) {
    processInfo.value.defaultFormList.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  :deep(.slot-item) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .open-icon {
    text-align: center;
    height: 30px;
  }
</style>
